@import '~scss/variables';

.status {
  display: inline-block;
  font-family: $font-family-id;
  line-height: 12px;
  font-weight: bold;
  vertical-align: middle;
}

.icon {
  float: left;
  height: 12px;
  width: 12px;
  margin-right: 8px;
  background: $white;
  border-radius: 50%;

  .draft {
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: $white;
    border: 2px solid $light-color08;
    border-radius: 50%;
  }

  .review {
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: $white;
    border: 2px solid $green-color03;
    border-radius: 50%;
  }

  .passed {
    position: relative;
    top: -2px;
    left: -2px;
    svg {
      color: $white;
      fill: $green;
    }
  }

  .suspended {
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: $yellow;
    border-radius: 50%;

    .substract {
      svg {
        color: $white;
      }
    }
  }

  .deleted {
    position: relative;
    top: -2px;
    left: -2px;
    svg {
      color: $white;
      fill: $red-color03;
    }
  }
}
